<template>
  <div class="zpon-flexbox-item" :class="classes">
    <slot></slot>
  </div>
</template>

<script type="text/babel">
export default {
  name: 'zpon-flexbox-item',
  props: {
    align: {
      validator (val) {
        return ['top', 'center', 'bottom'].indexOf(val) > -1
      },
      default: 'center'
    }
  },
  computed: {
    classes () {
      if (this.align === 'top') {
        return 'zpon-flexbox-item-start'
      } else if (this.align === 'bottom') {
        return 'zpon-flexbox-item-end'
      } else {
        return 'zpon-flexbox-item-center'
      }
    }
  }
}
</script>
